let Login = {

    render: async () => {
        return /*html*/ `
            <div class="my-container">
               <div class="row">
                     <div class="col-lg-5 col-md-7">
                        <!-- form card login -->
                        <div class="card">
                            <div class="card-header">
                                <h3 class="mb-0">登 录</h3>
                            </div>
                            <div class="card-body">
                                <form class="was-validated" role="form" autocomplete="off" id="formLogin" novalidate="" method="POST">
                                    <div class="form-group"> 
                                        <input type="text" placeholder="手机号" class="form-control" name="user_input" id="user_input" required>
                                        <div class="invalid-feedback">请填写.</div>
                                        <div class="i-icon i-icon-phone"></div>
                                    </div>
                                    <div class="form-group">
                                        <input type="password" placeholder="密码" class="form-control" id="pass_input" autocomplete="new-password" required>
                                        <div class="invalid-feedback">请填写.</div>
                                        <div class="i-icon i-icon-password"></div>
                                    </div>
                                    <div class="forget-password-wrapper">
                                        <span class="forget-password" id="reset_submit_btn">忘记密码？</span>
                                    </div>
                                    <div class="login-btn-wrapper">
                                        <div class="login-btn" id="login_submit_btn">登录</div>
                                        <div class="register-btn" id="register_submit_btn">我要注册</div>
                                    </div>
                                </form>
                                <p class="statusMsg"></p>
                            </div>
                        </div>
                    </div>
                </div>
                ${window.ScirichonFooter}
            </div>
        `
    }
    , after_render: async () => {
        $("#login_submit_btn").click((event) => {
            event.preventDefault()
            $('.statusMsg').empty()
            let user       = document.getElementById("user_input");
            let pass        = document.getElementById("pass_input");
            if (user.value =='' || pass.value == '' ) {
                alert (`用户名密码不能为空`)
            }
            else {
                let encryptedPasswd = window.crypt.encrypt(pass.value)
                $.post(window.LOGIN_URL, {phone: user.value, passwd:encryptedPasswd})
                    .done(function (data) {
                        localStorage.setItem('token',data.token)
                        window.renderNavBar();
                        window.onNavigate('/')
                    }).fail((xhr) => {
                    $('.statusMsg').html(`<span style="color:#ff0000;">${xhr.responseText}</p>`);
                })
            }
        })
        $("#reset_submit_btn").click((event) => {
            window.onNavigate('/reset')
        })
        $("#register_submit_btn").click((event) => {
            window.onNavigate('/register')
        })
        $("input").keyup((event)=>{
            if (event.keyCode === 13) {
                event.preventDefault();
                document.getElementById("login_submit_btn").click();
            }
        })
    }
}

export default Login;
